<template>
  <view v-for="(item1, index1) in list" :key="index1" class="ul">
    <view v-for="(item2, index2) in item1.group" :key="index2" class="li">
      <view class="left">
        <view class="icon">{{ item2.icon }}</view>
        <view class="text">{{ item2.label }}</view>
      </view>

      <view class="right">
        <view class="icon">
          <uni-icons type="right" size="16" color="#313135"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
withDefaults(
  defineProps<{
    list: Array<{
      group: Array<{
        icon: string
        label: string
        path: string
      }>
    }>
  }>(),
  {},
)
</script>
<style lang="scss" scoped>
.ul {
  width: 100%;
  height: auto;
  background-color: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  margin-top: 50rpx;

  .li:last-child {
    border: none;
  }

  .li {
    width: 100%;
    height: 95rpx;
    border-bottom: 1.5rpx solid #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #313135;
  }
}
</style>
